import React, { useEffect, useState } from 'react';
import ProCard, { StatisticCard } from '@ant-design/pro-card';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Select, Space, Breadcrumb, message, Spin } from 'antd';
import { useRequest } from 'umi';

import Achievements from './component/Achievements';
import TeachingPlan from './component/TeachingPlan';
import StudentTrain from './component/StudentTrain';
import CooperationExchange from './component/CooperationExchange';

const { Statistic } = StatisticCard;
const { Option } = Select;

export default () => {
  const [tabKey, setTabKey] = useState('Achievements');
  const [queryType, setQueryType] = useState<any>();
  const [auth, setAuth] = useState<any>();
  const [personList, setPersonList] = useState<any>();
  const [userAccount, setUserAccount] = useState<any>();

  const getUserInfo = useRequest((data = null) => {
    return {
      url: 'http://10.1.40.84:9993/user/getUserInfo',
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
      data,
    };
  });
  const [userId, setUserId] = useState();

  const onTabChange = (value: any) => {
    setTabKey(value);
  };

  useEffect(() => {
    const personInfo = JSON.parse(localStorage.getItem('personInfo') || '{}');
    if (personInfo.ROLE_管理员?.data) {
      setPersonList(personInfo.ROLE_管理员?.data);
      setQueryType('all');
      setAuth(3);
    } else if (personInfo.ROLE_方向负责人?.data) {
      setPersonList(personInfo.ROLE_方向负责人?.data);
      setQueryType('direction');
      setAuth(2);
    } else if (personInfo.ROLE_子方向负责人?.data) {
      setPersonList(personInfo.ROLE_子方向负责人?.data);
      setQueryType('group');
      setAuth(1);
    } else {
      setPersonList([
        {
          label: getUserInfo?.data?.realName,
          value: getUserInfo?.data?.id,
          userId: getUserInfo?.data?.username,
        },
      ]);
      setQueryType('personal');
      setAuth(0);
    }
  }, [getUserInfo.data]);

  useEffect(() => {
    setUserId(getUserInfo?.data?.id || '');
    setUserAccount(getUserInfo?.data?.username || '');
  }, [getUserInfo.data]);

  return (
    <PageContainer
      header={{
        title: null,
        breadcrumb: (
          <Breadcrumb>
            <Breadcrumb.Item>个人中心</Breadcrumb.Item>
            <Breadcrumb.Item>个人看板</Breadcrumb.Item>
          </Breadcrumb>
        ),
      }}
      tabList={[
        {
          tab: '科研成果',
          key: 'Achievements',
          closable: false,
        },
        {
          tab: '合作交流',
          key: 'CooperationExchange',
          closable: false,
        },
        // {
        //   tab: '学生培养(开发中)',
        //   key: 'StudentTrain',
        //   closable: false,
        // },
        // {
        //   tab: '教学计划',
        //   key: 'TeachingPlan',
        //   closable: false,
        // },
      ]}
      tabProps={{
        type: 'editable-card',
        hideAdd: true,
        onEdit: (e, action) => console.log(e, action),
      }}
      onTabChange={onTabChange}
      tabBarExtraContent={
        personList && getUserInfo.data ? (
          <>
            <>{'查找人员：'}</>
            <Select
              style={{ width: 240 }}
              showSearch
              filterOption={(input, option) =>
                (option!.children as unknown as string)
                  .toLowerCase()
                  .includes(input.toLowerCase())
              }
              onSelect={(e: any) => {
                const Item = JSON.parse(e);
                setUserId(Item.userId);
                setUserAccount(Item.userAccount);
              }}
              defaultValue={JSON.stringify({
                userId: getUserInfo?.data?.id,
                userAccount: getUserInfo?.data?.username,
              })}
            >
              {personList?.map((item: any) => (
                <Option
                  key={item.value}
                  value={JSON.stringify({
                    userId: item.value,
                    userAccount: item.userId,
                  })}
                >
                  {item.label}
                </Option>
              ))}
            </Select>
          </>
        ) : (
          ''
        )
      }
    >
      {tabKey === 'Achievements' ? (
        <Achievements
          userId={userId}
          queryType={queryType}
          auth={auth}
          userAccount={userAccount}
        />
      ) : null}
      {/* {tabKey === 'TeachingPlan' ? <TeachingPlan /> : null} */}
      {tabKey === 'CooperationExchange' ? (
        <CooperationExchange
          userId={userId}
          queryType={queryType}
          auth={auth}
          userAccount={userAccount}
        />
      ) : null}
      {tabKey === 'StudentTrain' ? <StudentTrain /> : null}
    </PageContainer>
  );
};
